<div class="g-top-button-group">
  <button class="btn btn-primary" (click)="submit()">发送消息</button>
</div>
<form id="form" class="g-my-form" [formGroup]="messageForm">
  <div class="row">
    <div class="col-9">
      <m-card>
        <div card-head class="w-100">
          <div class="form-group mt-3">
            <label>
              收信人：
            </label>
            <div
              class="form-control admin_list form-control-sm"
              [class.ng-invalid]="to.invalid"
              [class.ng-touched]="to.touched"
            >
              <ng-container *ngFor="let admin of selection.selected">
                <span>{{ admin.full_name }}</span>
              </ng-container>
            </div>
          </div>
          <div class="form-group">
            <label for="">主题：</label>
            <input
              type="text"
              class="form-control form-control-sm"
              formControlName="title"
              maxlength="30"
            />
          </div>
        </div>
        <textarea
          mMarkdownEdit
          class="edit form-control"
          formControlName="content"
          maxlength="1000"
        ></textarea>
      </m-card>
    </div>
    <div class="col-3">
      <m-card [autoHeight]="true">
        <div card-head class="d-flex align-items-center">
          <div class="g-card-title">联系人</div>
        </div>
        <div class="card-body">
          <m-key-search class="full" [placeholder]="'查找联系人'" #selectRef label_text=""></m-key-search>
          <m-api-data-table [dataSource]="all_admin" [selection]="selection"  [searchControl]="selectRef">
            <ng-container mDataTableColumn header="姓名">
              <ng-template let-name="full_name">
                <td>{{ name }}</td>
              </ng-template>
            </ng-container>
            <ng-container mDataTableColumn header="账户名">
              <ng-template let-name="username">
                <td>{{ name }}</td>
              </ng-template>
            </ng-container>
          </m-api-data-table>
        </div>
      </m-card>
    </div>
  </div>
</form>
